<template>
  <view class="index_warp">
    <u-sticky
      offset-top="0"
      bg-color="#f5f5f5"
      h5-nav-height="0"
      class="u-sticky"
    >
      <view class="header_search_warp">
        <header-search-input @clickGetMajor="clickGetMajor" :disabled="true" />
      </view>
    </u-sticky>
    <view class="image_content">
      <image src="@/static/images/walkman.png" />
    </view>
    <view class="content_warp">
      <walkman-card v-for="item in list" :key="item.id" :item="item" />
    </view>
  </view>
</template>

<script>
import { coursePackageList } from "@/api/course";
export default {
  data() {
    return {
      pageSize: 20,
      pageNum: 1,
      list: [],
      total: 0,
    };
  },
  onLoad: function (options) {
    this.getCoursePackage();
  },
  // 页面滚动到底部
  onReachBottom() {
    this.$u.throttle(this.getCoursePackage(), 500, true);
  },
  methods: {
    getCoursePackage() {
      let { pageSize, pageNum, list, total } = this;
      if ((pageNum - 1) * pageSize > total) {
        return;
      }
      let data = {};
      data.pageNum = pageNum;
      data.playType = 3; //1：点播 2：直播 （课程专属）3:随身听(音频)
      data.pageSize = pageSize;
      coursePackageList(data).then((res) => {
        console.log(res);
        list = [...list, ...(res.list || [])];
        total = res.total;
        this.list = list;
        this.pageNum = pageNum + 1;
        this.total = total;
      });
    },
    clickGetMajor(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  padding-bottom: 28upx;

  .u-sticky {
    background-color: #f5f5f5;
  }

  .image_content {
    width: 690upx;
    height: 240upx;
    margin-top: 10upx;
    margin-left: 30upx;
  }

  .content_warp {
    margin: 30upx;
  }
}
</style>
